<template>
    <div class="enterprise-edit-container">
        <!-- 企業信息 -->
        <div>
            <pageTitle :title="'編輯企業信息'" />

            <div class="edit-form">
                <!-- 第一排：企業logo -->
                <div class="form-row">
                    <div class="form-label">企業LOGO：</div>
                    <div class="form-content">
                        <el-upload action="https://your-upload-api.com" list-type="picture-card" :limit="1"
                            :on-success="handleLogoSuccess" :on-remove="handleLogoRemove">
                            <el-icon>
                                <Plus />
                            </el-icon>
                        </el-upload>
                    </div>
                </div>

                <!-- 第二排：企業名稱、識別號、類型 -->
                <div class="form-row">
                    <div class="form-group">
                        <div class="form-label">企業名稱：</div>
                        <el-input v-model="formData.name" placeholder="請輸入企業名稱" />
                    </div>
                    <div class="form-group">
                        <div class="form-label">企業識別號：</div>
                        <el-input v-model="formData.idNumber" placeholder="請輸入識別號" />
                    </div>
                    <div class="form-group">
                        <div class="form-label">企業類型：</div>
                        <el-select v-model="formData.type" placeholder="請選擇企業類型">
                            <el-option v-for="item in enterpriseTypes" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </div>

                <!-- 第三排：所屬行業、企業規模 -->
                <div class="form-row">
                    <div class="form-group">
                        <div class="form-label">所屬行業：</div>
                        <el-input v-model="formData.industry" placeholder="請輸入所屬行業" />
                    </div>
                    <div class="form-group">
                        <div class="form-label">企業規模：</div>
                        <el-select v-model="formData.scale" placeholder="請選擇企業規模">
                            <el-option v-for="item in enterpriseScales" :key="item.value" :label="item.label"
                                :value="item.value" />
                        </el-select>
                    </div>
                </div>

                <!-- 第四排：聯繫人、郵政編碼 -->
                <div class="form-row">
                    <div class="form-group">
                        <div class="form-label">聯繫人：</div>
                        <el-input v-model="formData.contactPerson" placeholder="請輸入聯繫人" />
                    </div>
                    <div class="form-group">
                        <div class="form-label">郵政編碼：</div>
                        <el-input v-model="formData.postalCode" placeholder="請輸入郵政編碼" />
                    </div>
                </div>

                <!-- 第五排：所在城市、詳細地址 -->
                <div class="form-row">
                    <div class="form-group">
                        <div class="form-label">所在城市：</div>
                        <el-select v-model="formData.city" placeholder="請選擇城市" filterable>
                            <el-option v-for="city in cities" :key="city.value" :label="city.label"
                                :value="city.value" />
                        </el-select>
                    </div>
                    <div class="form-group">
                        <div class="form-label">詳細地址：</div>
                        <el-input v-model="formData.address" placeholder="請輸入詳細地址" />
                    </div>
                </div>

                <!-- 第六排：企業簡介 -->
                <div class="form-row">
                    <div class="form-label">企業簡介：</div>
                    <div class="form-content">
                        <el-input v-model="formData.introduction" type="textarea" :rows="5" placeholder="請輸入企業簡介"
                            resize="none" />
                    </div>
                </div>

                <!-- 開票信息標題 -->
                <pageTitle :title="'開票信息'" class="section-title" />

                <!-- 第一排：開票抬頭、納稅人識別號 -->
                <div class="form-row">
                    <div class="form-group">
                        <div class="form-label">開票抬頭：</div>
                        <el-input v-model="formData.invoiceTitle" placeholder="請輸入開票抬頭" />
                    </div>
                    <div class="form-group">
                        <div class="form-label">納稅人識別號：</div>
                        <el-input v-model="formData.taxId" placeholder="請輸入納稅人識別號" />
                    </div>
                </div>

                <!-- 第二排：銀行賬號、開戶行 -->
                <div class="form-row">
                    <div class="form-group">
                        <div class="form-label">銀行賬號：</div>
                        <el-input v-model="formData.bankAccount" placeholder="請輸入銀行賬號" />
                    </div>
                    <div class="form-group">
                        <div class="form-label">開戶行：</div>
                        <el-input v-model="formData.bankName" placeholder="請輸入開戶行名稱" />
                    </div>
                </div>

                <!-- 第三排：註冊地址、備註 -->
                <div class="form-row">
                    <div class="form-group">
                        <div class="form-label">註冊地址：</div>
                        <el-input v-model="formData.registeredAddress" placeholder="請輸入註冊地址" />
                    </div>
                    <div class="form-group">
                        <div class="form-label">備註：</div>
                        <el-input v-model="formData.notes" placeholder="請輸入備註信息" />
                    </div>
                </div>

                <!-- 操作按鈕 -->
                <div class="form-actions">
                    <el-button type="primary" @click="submitForm">保存</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import pageTitle from "@/components/pageTitle/pageTitle.vue"

// 表单数据
const formData = ref({
    logo: '',
    name: '',
    idNumber: '',
    type: '',
    industry: '',
    scale: '',
    contactPerson: '',
    postalCode: '',
    city: '',
    address: '',
    introduction: '',
    invoiceTitle: '',
    taxId: '',
    bankAccount: '',
    bankName: '',
    registeredAddress: '',
    notes: ''
})

// 下拉选项数据
const enterpriseTypes = ref([
    { value: '1', label: '有限公司' },
    { value: '2', label: '股份有限公司' },
    { value: '3', label: '集团公司' },
    { value: '4', label: '合伙企业' },
    { value: '5', label: '个人独资企业' }
])

const enterpriseScales = ref([
    { value: '1', label: '1-50人' },
    { value: '2', label: '50-100人' },
    { value: '3', label: '100-500人' },
    { value: '4', label: '500-1000人' },
    { value: '5', label: '1000人以上' }
])

const cities = ref([
    { value: '1', label: '北京市' },
    { value: '2', label: '上海市' },
    { value: '3', label: '广州市' },
    { value: '4', label: '深圳市' },
    { value: '5', label: '杭州市' },
    { value: '6', label: '台北市' },
    { value: '7', label: '高雄市' }
])

// 图片上传处理
const handleLogoSuccess = (response, file) => {
    formData.value.logo = URL.createObjectURL(file.raw)
}

const handleLogoRemove = () => {
    formData.value.logo = ''
}

// 表单提交
const submitForm = () => {
    console.log('提交表单:', formData.value)
    // 这里添加实际提交逻辑
}

// 重置表单
const resetForm = () => {
    formData.value = {
        logo: '',
        name: '',
        idNumber: '',
        type: '',
        industry: '',
        scale: '',
        contactPerson: '',
        postalCode: '',
        city: '',
        address: '',
        introduction: '',
        invoiceTitle: '',
        taxId: '',
        bankAccount: '',
        bankName: '',
        registeredAddress: '',
        notes: ''
    }
}
</script>

<style scoped lang="less">
.enterprise-edit-container {
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;

    .edit-form {
        margin-top: 20px;

        .form-row {
            display: flex;
            margin-bottom: 20px;
            align-items: flex-start;

            .form-label {
                width: 100px;
                line-height: 32px;
                text-align: right;
                padding-right: 12px;
                font-size: 14px;
                color: #606266;
            }

            .form-content {
                flex: 1;
            }

            .form-group {
                width: 400px;
                display: flex;
                align-items: center;
                margin-right: 20px;
                padding: 10px 0;

                &:last-child {
                    margin-right: 0;
                }

                .form-label {
                    width: auto;
                    min-width: 80px;
                    margin-right: 12px;
                }

                .el-input,
                .el-select {
                    flex: 1;
                }
            }
        }

        .form-actions {
            display: flex;
            justify-content: center;
            margin-top: 30px;

            .el-button {
                width: 120px;
                margin: 0 15px;
            }
        }
    }

    :deep(.el-upload--picture-card) {
        width: 100px;
        height: 100px;
        line-height: 100px;
    }

    :deep(.el-textarea__inner) {
        min-height: 120px !important;
    }
}
</style>